<style scoped>
.icon{font-size: 26px;}
.popup_title{padding: 10px 0;font-weight: bold;font-size: 18px;text-align: center}
</style>
<template>
  <van-popup v-model:show="is_show" round position="bottom" safe-area-inset-bottom closeable :close-on-click-overlay="false" @click-close-icon="close" teleport="body">
    <div class="popup_title">支付方式</div>
    <van-radio-group v-model="pay_type">
      <van-cell-group>
        <template v-for="row in pay_type_list">
          <van-cell v-show="!~ban_type.indexOf(row.name)" center :title="row.title" :label="row.tips" @click="select(row)" >
            <template #icon>
              <IconImg :value="row.ico" :disable="row.status!=1" class="icon"></IconImg>
            </template>
            <template #right-icon>
              <van-radio :name="row.name" :disabled="row.status==0"/>
            </template>
          </van-cell>
        </template>
      </van-cell-group>
    </van-radio-group>
    <div style="padding: 0.5em 1em;">
      <van-button text="确定" :disabled="!pay_type" @click="click('ok')" type="primary" size="" block round />
    </div>
  </van-popup>
</template>

<script>
import {ajax} from "@/js/api_tool.js";
import {s94_event} from "@/js/s94_tool.js";
import {reactive} from "vue";
import {use_config_map} from "@/store/config_map.js";
import {use_this_user} from "@/store/this_user.js";
import IconImg from "@/components/widget/IconImg.vue";


const _this = reactive({
  is_show: false,
  callback: function (){},
  cancel(){},

  pay_type: '',
  ban_type: [],

  pay_type_list: undefined,
  select_row: undefined

})


function get_pay_type(){
  return new Promise((resolve,reject)=>{
    if (_this.pay_type_list) return resolve(_this.pay_type_list);
    ajax('/home/index/pay_type', (res)=>{
      _this.pay_type_list = Object.values(res.data);
      resolve(_this.pay_type_list);
      return false;
    })
  })
}
function allow(row){
  return row.status>0 && !~_this.ban_type.indexOf(row.name);
}
function pay_type_handle(pay_type){
  let select_row = undefined;
  _this.pay_type_list.forEach(row=>{
    if (row.name === 'yue'){
      row.title = use_config_map().config.pay?.yue?.user_money_label || '余额';
      row.tips = `预计剩余：￥${use_this_user().money || 0}(仅供参考)`;
    }
    if (row.on>0 && allow(row)) select_row = row;
  })
  if (pay_type) {
    let has = _this.pay_type_list.find(row=>row.name===pay_type);
    if (has && allow(has)) select_row = has;
  }
  if (select_row) _this.pay_type = select_row.name;
}

export function select_pay_type(ban_type, pay_type){
  _this.ban_type = ban_type || [];

  get_pay_type().then(list => {
    pay_type_handle(pay_type)
    _this.is_show = true;
  });
  return new Promise((resolve, reject)=>{
    _this.callback = resolve;
    _this.cancel = reject
  })
}
select_pay_type._this = _this;
select_pay_type.hide = function(){
  _this.is_show = false;
}

s94_event('router.after', ()=>{
  _this.is_show = false;
})
export default {
  components: {IconImg},
  data(){
    return _this
  },
  methods: {
    select(row){
      if (row.status<=0) return;
      this.pay_type = row.name;
    },
    close(){
      this.cancel();
      this.is_show = false;
    },
    click(){
      if (!this.pay_type) return;
      let select_row = _this.pay_type_list.find(row=>row.name===this.pay_type);
      if (!select_row) return;
      this.callback(select_row);
      this.is_show = false;
    },
  }
}
</script>